<template>
	<z-paging ref="paging" v-model="list[currentIndex].content" :auto="false" @query="queryList" height="100vh"
		:paging-style="{minHeight: '100vh', backgroundColor: '#F5F6F7'}">
		<template #top>
			<view class="navbar">
				<view v-for="(item, index) in listItems" :key="index" class="nav-item"
					:class="{current: currentIndex === index}" @click="taggleNav(index)">
					<text>{{item.title}}</text>
				</view>
			</view>
		</template>

		<!-- 内容区域 -->
		<view class="content-box">
			<view class="tabs-container" :style="{transform: `translateX(-${currentIndex * 100}%)`}">
				<view v-for="(tabItem, tabIndex) in listItems" :key="tabIndex" class="tab-content">
					<view class="list-scroll-content" :class="{'animate-in': currentIndex === tabIndex}">
						<view v-if="tabIndex === 0">
							<uni-swipe-action ref="addressRef">
								<view class="list-item" v-for="(item, index) in addressList" :key="index"
									@click="checkAddress1(item)" :style="{'--item-index': index}">
									<uni-swipe-action-item class="swipe-item" :options="options2" @change="change"
										@click="bindClick1($event,item)">
										<view class="wrapper">
											<image v-if="item.IsDefault * 1 === 1" class="default-tag"
												src="https://wzws.wanshanlundiao.cn/upload/img/20250414/202504142048456366.png" mode=""></image>
											<view class="content-area">
												<view class="u-box">
													<text class="name">{{ item.Name }}</text>
													<text class="mobile">{{ item.Mobile }}</text>
												</view>
												<view class="address-box">
													<text class="address">{{ item.Province }}{{ item.City }}{{ item.County }}
														{{ item.Address }}</text>
												</view>
											</view>
											<view class="editBtn" @click.stop="navToAddressManage('edit', item)">
												<image src="../../static/images/orginPen.png" mode="widthFix"></image>
											</view>
										</view>
									</uni-swipe-action-item>
								</view>
							</uni-swipe-action>
						</view>
						<view v-if="tabIndex === 1">
							<uni-swipe-action ref="phoneRef">
								<view class="list-item" v-for="(item, index) in personList" :key="index"
									@click="checkAddress2(item)" :style="{'--item-index': index}">
									<uni-swipe-action-item class="swipe-item" :options="options1" @change="change"
										@click="bindClick2($event,item)">
										<view class="wrapper">
											<view class="content-area">
												<view class="u-box">
													<text class="name">{{ item.Name }}</text>
													<text class="mobile">{{ item.Mobile }}</text>
												</view>
												<view class="address-box">
													<text class="address">身份证：{{item.CardNo.replace(/(.{5}).*(.{5})/,"$1******$2")}}</text>
												</view>
											</view>
											<view class="editBtn" @click.stop="navToPersonManage('edit', item)">
												<image src="../../static/images/orginPen.png" mode="widthFix"></image>
											</view>
											<image v-if="item.IsDefault * 1 === 1" class="default-tag"
												src="https://wzws.wanshanlundiao.cn/upload/img/20250414/202504142048456366.png" mode=""></image>
										</view>
									</uni-swipe-action-item>
								</view>
							</uni-swipe-action>
						</view>
					</view>
				</view>
			</view>
		</view>

		<template #bottom>
      <view class="bottom">
        <button v-if="currentIndex==0" class="add-btn" @click="addAddress('add')">{{$t('contact.addAddress')}}</button>
        <button v-if="currentIndex==1" class="add-btn" @click="addPerson('add')">{{$t('contact.addContact')}}</button>
        <hz-safe-area></hz-safe-area>
      </view>
    </template>
	</z-paging>
</template>

<script>
	import {
		getAcceptAddressList,
		deleteAcceptAddress,
		deleteUsersContacts,
		getUsersContactsList
	} from '@/api/mall.js';
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import empty from '@/components/empty.vue'
	import uniSwipeAction from '../components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '../components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
  import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";

	export default {
		components: {
      HzSafeArea,
			uniSwipeAction,
			uniLoadMore,
			empty,
			uniSwipeActionItem,
			tabControl
		},
		data() {
			return {
				currentIndex: 0,
				list: [],
				source: 0,
				addressList: [],
				personList: [],
				options1: [{
					text: '删除',
					type: 2,
					style: {
						backgroundColor: '#498FFF'
					}
				}],
				options2: [{
					text: '删除',
					type: 2,
					style: {
						backgroundColor: '#498FFF'
					}
				}],
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo
			}),
			listItems() {
				return [{
					title: this.$t('contact.addressManagement'),
					content: []
				},
				{
					title: this.$t('contact.contactManagement'),
					content: []
				}];
			}
		},
		methods: {
			// 切换导航
			taggleNav(val) {
				if (this.$refs && this.$refs.phoneRef) {
					this.$refs.phoneRef.closeOther && this.$refs.phoneRef.closeOther()
				}
				if (this.$refs && this.$refs.addressRef) {
					this.$refs.addressRef.closeOther && this.$refs.addressRef.closeOther()
				}
				this.currentIndex = val;
				this.$refs.paging.reload();
			},
			
			// 获取数据
			async queryList(pageNo, pageSize) {
				try {
					if (this.currentIndex === 0) {
						const { Data } = await getAcceptAddressList({
							Index: pageNo,
							Size: pageSize,
						});
						this.addressList = Data;
						this.$refs.paging.complete(Data);
					} else {
						const { Data } = await getUsersContactsList({
							Index: pageNo,
							Size: pageSize,
						});
						this.personList = Data;
						this.$refs.paging.complete(Data);
					}
				} catch (e) {
					this.$refs.paging.complete(false);
				}
			},
			
			// 其他方法保持不变
			checkAddress1(item) {
				if (this.source == 1) {
					this.$api.prePage().addressData = item;
					uni.navigateBack();
				}
			},
			
			addAddress(type) {
				this.navToAddressManage('add');
			},
			
			navToAddressManage(type, item) {
				uni.navigateTo({
					url: `/user_subpages/address/add-address?type=${type}&data=${JSON.stringify(item)}`
				});
			},
			
			change(e) {
				// this.isOpened = e
			},
			
			bindClick1(e, item) {
				uni.showModal({
					content: this.$t('contact.deleteAddressConfirm'),
					success: (res) => {
						if (res.confirm) {
							deleteAcceptAddress({
								Id: item.Id
							}).then(res => {
								this.$api.msg(res.Msg);
								this.$refs.paging.reload();
							});
						}
					}
				});
			},
			
			checkAddress2(item) {
				if (this.source == 1) {
					const personList = this.$api.prePage().personList;
					const has = personList.some((row, index) => {
						return row.Id === item.Id && index !== this.index * 1;
					});

					if (has) {
						this.$api.msg(this.$t('contact.contactExists'));
						return;
					}

					this.$api.prePage().addPersonInfo({
						person: item,
						index: this.index
					});
					uni.navigateBack();
				}
			},
			
			addPerson(type) {
				this.navToPersonManage('add');
			},
			
			navToPersonManage(type, item) {
				uni.navigateTo({
					url: `/user_subpages/person/add-person?type=${type}&data=${JSON.stringify(item)}`,
					success: (res) => {
						const addAddressPage = res.eventChannel;
						// 可以向打开的页面传递数据
						addAddressPage.emit('initData', {
							from: 'userContact'
						});
					}
				});
			},
			
			bindClick2(e, item) {
				uni.showModal({
					content: this.$t('contact.deleteContactConfirm'),
					success: (res) => {
						if (res.confirm) {
							deleteUsersContacts({
								Id: item.Id
							}).then(res => {
								this.$api.msg(res.Msg);
								this.$refs.paging.reload();
							});
						}
					}
				});
			},
		},
		onLoad(options) {
			if (options.id) {
				this.taggleNav(options.id);
			}
		},
    onShow() {
      this.$refs.paging.reload()
      console.log("onShow")
    },
	};
</script>

<style lang="scss" scoped>
	/* 顶部导航栏样式 */
	.navbar {
		display: flex;
		height: 98rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 24rpx;
			color: #666;
			position: relative;
			transition: all 0.3s ease;
			cursor: pointer;

			text {
				display: inline-block;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
				transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
				position: relative;
				z-index: 1;
				
				&:after {
					content: '';
					position: absolute;
					bottom: 6rpx;
					left: 50%;
					width: 0;
					height: 3rpx;
					background-color: #498FFF;
					transition: width 0.3s ease, left 0.3s ease;
					z-index: 0;
				}
			}

			&:active text {
				transform: scale(0.95);
			}

			&.current {
				text {
					font-size: 30rpx;
					font-weight: 600;
					background-color: #498FFF;
					color: #FFFFFF;
					transform: translateY(0) scale(1);
					animation: popIn 0.4s ease;
					
					@keyframes popIn {
						0% {
							transform: translateY(10rpx) scale(0.9);
							opacity: 0.7;
						}
						70% {
							transform: translateY(-5rpx) scale(1.05);
						}
						100% {
							transform: translateY(0) scale(1);
						}
					}
				}
				
				&:after {
					content: none;
				}
			}
		}
	}

	/* 内容区域样式优化 */
	.content-box {
		position: relative;
		width: 100%;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.tabs-container {
		display: flex;
		width: 100%;
		transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
		will-change: transform;
	}

	.tab-content {
		flex: 0 0 100%;
		width: 100%;
	}

	.list-scroll-content {
		height: 100%;
		padding: 10rpx;
		box-sizing: border-box;
		opacity: 0;
		transform: translateY(30rpx);
		transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
		
		&.animate-in {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.list-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		position: relative;
		overflow: hidden;
		animation: fadeInUp 0.5s ease forwards;
		animation-delay: calc(0.1s * var(--item-index, 0));
		will-change: transform, opacity, box-shadow;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		display: flex;
		align-items: center;

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30rpx);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		&:active {
			transform: scale(0.98);
			box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.08);
		}

		.swipe-item {
			width: 100%;
		}

		.wrapper {
			padding: 32rpx;
			position: relative;
			width: 100%;
			
			&::after {
				content: '';
				position: absolute;
				left: 32rpx;
				right: 32rpx;
				bottom: 0;
				height: 1rpx;
				background: linear-gradient(to right, transparent, #F0F0F0, transparent);
			}
		}

		.content-area {
			padding-right: 80rpx; /* 为编辑按钮预留空间 */
		}

		.u-box {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-right: 20rpx;
				position: relative;
				padding-left: 24rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 24rpx;
					background: #498FFF;
					border-radius: 3rpx;
				}
			}

			.mobile {
				font-size: 28rpx;
				color: #666;
				background: #F8F9FA;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}

		.address-box {
			.address {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.editBtn {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F8F9FA;
			transition: all 0.3s ease;
			border-radius: 50%;
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;

			&:active {
				background: #F0F0F0;
				transform: translateY(-50%) scale(0.95);
			}

			image {
				width: 32rpx;
				height: 32rpx;
				opacity: 0.7;
			}
		}

		.default-tag {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;
		}
	}

	.add-btn {
    height: 86rpx;
    background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 44rpx;
		transition: all 0.3s ease;
		letter-spacing: 2rpx;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(73,143,255,0.2);
		}
	}
  .bottom{
    padding: 20rpx;
    background-color: white;
  }

	/deep/ .uni-swipe-action {
		&__content {
			background: #FFFFFF;
		}
		
		&__btn-group {
			background: #498FFF;
			border-radius: 0 16rpx 16rpx 0;
		}
	}
</style>